<template>
  <div
    class="data_dialog"
    v-show="show"
    @click.stop="$store.commit('updateIsShowDataDialog', false)"
  >
    <div class="block">
      <div class="top">
        <div class="title">/ A0008订单菜品状态</div>
        <div class="close">
          <img
            @click="$store.commit('updateIsShowDataDialog', false)"
            style="width: 50px"
            src="../../assets/images/ic_close.png"
            alt
          />
        </div>
      </div>
      <line-view></line-view>
      <div class="table">
        <el-table :data="data" stripe max-height="910">
          <el-table-column label="序号" width="76" align="center">
            <template slot-scope="scope">
              <div>{{scope.$index}}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.orderId}}</div>
            </template>
          </el-table-column>
          <el-table-column label="菜品名" align="center" width="300">
            <template slot-scope="scope">
              <div>{{scope.row.dishName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              <div>{{scope.row.num}}</div>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" align="center" width="150">
            <template slot-scope="scope">
              <div class="c_cyan">{{scope.row.orderTime | filterTime}}</div>
            </template>
          </el-table-column>
          <el-table-column label="菜品状态" align="center" width="170">
            <template slot-scope="scope">
              <span
                :class="scope.row.status | filterStatusClass"
              >{{scope.row.status | filterStatusName}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import LineView from "@/components/line-view";
export default {
  computed: {
    data() {
      return this.$store.state.dataDialogData;
    },
    show() {
      return this.$store.state.isShowDataDialog;
    }
  },
  data() {
    return {
      foodList: []
    };
  },
  created() {},
  mounted() {},
  methods: {},
  filters: {
    filterStatusName(status) {
      let str = "";
      switch (status) {
        case 1:
          str = "进行中";
          break;
        case 2:
          str = "等待中";
          break;
        case 3:
          str = "制作中";
          break;
        case 4:
          str = "已完成";
          break;
        case 5:
          str = "通知取餐";
          break;
        case 6:
          str = "取餐完毕";
          break;
        case 7:
          str = "制作完成";
          break;
        case 8:
          str = "运输中";
          break;
        default:
          break;
      }
      return str;
    },
    filterStatusClass(status) {
      let className = "";
      switch (status) {
        case 1:
          className = "c_cyan";
          break;
        case 2:
          className = "c_yellow";
          break;
        case 3:
          className = "c_cyan";
          break;
        case 4:
          className = "c_gray";
          break;
        case 5:
          className = "c_green green_btn";
          break;
        case 6:
          className = "c_green green_btn";
          break;
        case 7:
          className = "c_green green_btn";
          break;
        case 8:
          className = "c_blue";
          break;
        default:
          break;
      }
      return className;
    },
    filterTime(orderTime) {
      let time = new Date(orderTime);
      let h = time.getHours();
      let i = time.getMinutes();
      let s = time.getSeconds();
      h = h > 9 ? h : "0" + h;
      i = i > 9 ? i : "0" + i;
      s = s > 9 ? s : "0" + s;
      return h + ":" + i + ":" + s;
    }
  },
  components: { LineView }
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>
